<template>
  <div class="out">
    <zHeader pageTitle="商铺实拍"></zHeader>
    
    <div class="pageOut">
      

          <van-swipe class="imageContent" :autoplay="5000" indicator-color="white" lazy-render >
            <van-swipe-item v-for="(item, index) in houseInfo.houseImage? houseInfo.houseImage : storeImageUrls" :index="index">
              <img class="image" :src="item" @click="imagePreviewHandler(item)" />
            </van-swipe-item>
          </van-swipe>
  
    </div>
  </div>
</template>

<script setup>

import { postFangWuDetail } from '@/api/fangWuInfo/index.js'
import { getUserId } from '@/config/config.js'
import { pageConstant } from '@/config/contant.js'


const storeImageUrls = ref([
    require('@/assets/img/storeImage/01.png'),
    require('@/assets/img/storeImage/02.png')
])


const houseInfo = ref({})
const loadFangWuDetailDataHandler = () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0
  });

  postFangWuDetail({userId: getUserId()}).then(res => {
    // 关闭加载中提示
    closeToast();

    if (res.data.code == pageConstant.okCode) {
      houseInfo.value = res.data.data
      console.log('商铺信息:',houseInfo.value)
      
      // 添加示例配套设施数据（如果后端没有返回的话）
      if (houseInfo.value.shiNeiSheBeiGuanLianList) {
        const supportingFacilities=houseInfo.value.shiNeiSheBeiGuanLianList.map(item=>{
          return item.leiBieName
        })
        console.log('配套设施:',supportingFacilities)
        houseInfo.value.supportingFacilities = supportingFacilities
      }
      
      if (houseInfo.value.huXingInfo.urls) {
        houseInfo.value.huXingInfo.urls = houseInfo.value.huXingInfo.urls.split(',')[0]
      }
      if (houseInfo.value.huXingInfo.zhuangXiuShiXiangGuanLianList) {
        houseInfo.value.huXingInfo.zhuangXiuShiXiangGuanLianList.forEach(item => {
          item.urls = item.urls.split(',')[0]
        })
      }
      if (houseInfo.value.huXingInfo.jianZhuMianJi) {
        houseInfo.value.huXingInfo.jianZhuMianJi = houseInfo.value.huXingInfo.jianZhuMianJi + '㎡'
      }
      if (houseInfo.value.jianZhuJieGou.chuFangChengZhong) {
        houseInfo.value.jianZhuJieGou.chuFangChengZhong = houseInfo.value.jianZhuJieGou.chuFangChengZhong + 'kN/㎡'
      }
      if (houseInfo.value.jianZhuJieGou.keTingChengZhong) {
        houseInfo.value.jianZhuJieGou.keTingChengZhong = houseInfo.value.jianZhuJieGou.keTingChengZhong + 'kN/㎡'
      }
      if (houseInfo.value.jianZhuJieGou.weiShengJianChengZhong) {
        houseInfo.value.jianZhuJieGou.weiShengJianChengZhong = houseInfo.value.jianZhuJieGou.weiShengJianChengZhong + 'kN/㎡'
      }
      if (houseInfo.value.jianZhuJieGou.woShiChengZhong) {
        houseInfo.value.jianZhuJieGou.woShiChengZhong = houseInfo.value.jianZhuJieGou.woShiChengZhong + 'kN/㎡'
      }
      if (houseInfo.value.huXingInfo.jianChengNianDai) {
        houseInfo.value.huXingInfo.jianChengNianDai = houseInfo.value.huXingInfo.jianChengNianDai + '年'
      }
    } else {
      showToast(res.data.msg);
    }
  })
  .catch((err) => {
    console.log(err)
  })
}
loadFangWuDetailDataHandler()
const imagePreviewHandler = (url) => {
  showImagePreview([url]);
}
</script>

<style lang="scss" scoped>
.out {
  background-color: rgb(241, 241, 241);
  min-height: 100dvh;

  .pageOut {
    padding: 18px;
    padding-top: 0;

    .imageContent {
      margin-top: 10px;
      border-radius: 5px;
      height: 100%;
      width: 100%;
      position: relative;
      overflow: hidden;

      .image {
        height: 100%;
        width: 100%;
        border-radius: 5px;
      }

      .videoPlayIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .preImageBtn {
        position: absolute;
        top: 50%;
        left: 20px;
        transform: rotate(0.5turn) translate(50%, 50%);
      }

      .nextImageBtn {
        position: absolute;
        top: 50%;
        right: -10px;
        transform: translate(-50%, -50%);
      }
    }

    .apartmentTypeImageOut {
      width: 100%;
      display: flex;
      justify-content: center;
      position: relative;
      padding-top: 10px;

      .apartmentTypeImage {
        object-fit: contain;
        height: 217px;
        width: 182px;
      }

      .directionArea {
        position: absolute;
        top: 5px;
        left: 245px;

        .tipText {
          width: 24px;
          text-align: center;
          font-weight: bold;
          font-size: 12px;
        }

        .directionIcon {
          transform: rotate(0.375turn);
        }
      }
    }

    .cellGroupCard {
      background-color: #fff;
      margin: 0;
      margin-top: 10px;

      ::v-deep .van-cell {
        font-size: 16px;
      }
    }
    .tableOut {
      border-radius: 8px;
      overflow: hidden;
      color: #5a5a5a;
      // padding: 15px;
      // ::v-deep .vant-table-wrapper {
      //   border: 1px solid #d0d0d0;
      // }

      ::v-deep .vant-th {
        font-size: 14px;
      }
      ::v-deep .vant-td {
        font-size: 16px;
      }
      ::v-deep .vant-td:first-child {
        color: #344054;
      }
    }
    ::v-deep .van-swipe {
      height: 100%;
      width: 100%;
    }
    .custom-indicator {
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 2px 5px;
      font-size: 16px;
      color: #fff;
      letter-spacing: 5px;
    }

    .iconOut {
      position: absolute;
      top: 60px;
      right: 18px;
      z-index: 100;
    }
    .decorationMatterOutCard {
      padding: 84px 18px 60px;
      height: 100%;
      box-sizing: border-box;

      .imageOut {
        padding: 20px 0 10px 0;

        .image {
          object-fit: contain;
          height: 370px;
          max-width: 100%;
        }
      }
      .textArea {
        background-color: #fff;
        padding: 10px 15px;
        border-radius: 5px;
        max-height: calc(100% - 24px - 403px);
        overflow: auto;
        line-height: 23px;
      }
    }
  }
}
</style>